<template>
  <base-breadcrumb v-loading="loading.isLoad" title="安全关键会议记录">
    <a-card class="mb20">
      <titleName title="基本信息" />
      <a-form-model ref="form" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-row :gutter="24">
<!--          <a-col :md="8" :sm="8">-->
<!--            <a-form-model-item label="分公司名称：">-->
<!--              <BaseInput v-model="form.branchComName" disabled placeholder="加载中" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :md="16" :sm="16">
            <a-form-model-item label="所属单位：">
              <BaseInput v-model="form.viewName" disabled placeholder="加载中" />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="会议名称：">
              <BaseInput v-model="form.meetingName" disabled placeholder="加载中" />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="会议类型：">
              <BaseInput v-model="form.meetingKeyName" disabled placeholder="加载中" />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="主持人/主讲人：">
              <BaseInput v-model="form.speaker" disabled placeholder="加载中" />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="会议地点：">
              <BaseInput v-model="form.meetingPlace" disabled placeholder="加载中" />
            </a-form-model-item>
          </a-col>


          <a-col :md="8" :sm="8">
            <a-form-model-item label="会议时间：">
              <BaseInput v-model="form.startTime" disabled placeholder="加载中" />
            </a-form-model-item>
          </a-col>

          <a-col :md="8" :sm="8">
            <a-form-model-item label="状态：">
              <BSelect v-model="form.status" disabled placeholder="加载中" :list="status" />
            </a-form-model-item>
          </a-col>

          <a-col :md="8" :sm="8">
            <a-form-model-item :label="form.status !== 40?'应参会人数':'实际参会人数'">
              <div class="flex">
                <BaseInput v-if="form.status === 40" v-model="form.realNum" style="width: 100%" disabled placeholder="加载中" />
                <BaseInput v-else v-model="form.shouldNum" style="width: 100%" disabled placeholder="加载中" />
                <a-button class="ml20" type="primary" @click="signInVsible = true">查看签到</a-button>
                <a-button class="ml20" type="primary" @click="handlePage">会议大屏</a-button>
              </div>
            </a-form-model-item>
          </a-col>


          <a-col :md="24" :sm="24" key="meetingExplains">
            <a-form-model-item label="会议说明：" prop="meetingExplains">
              <BaseTextarea v-model.trim="form.meetingExplains" disabled placeholder="加载中" />
            </a-form-model-item>
          </a-col>

          <template v-if="pageType !== 'start'">
            <a-col :md="8" :sm="8">
              <a-form-model-item label="记录人：">
                <BaseInput v-model="form.creatorName" disabled placeholder="加载中" />
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-model-item label="记录时间：">
                <BaseInput v-model="form.createTime" disabled placeholder="加载中" />
              </a-form-model-item>
            </a-col>
          </template>
          <a-col :md="24" :sm="24" v-if="pageType !== 'start'">
            <a-form-model-item label="会议纪要：" prop="meetingSummary">
              <BaseTextarea
                v-model="form.meetingSummary"
                :auto-size="{ minRows: 10, maxRows: 25 }"
                :max-length="10000"
                :disabled="disabled || !currentUer"
                placeholder="请输入"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>


    <a-card class="mb20" v-if="pageType !== 'start'">
      <titleName title="相关资料上传" />
      <a-form-model ref="ruleForm">
        <div v-if="pageType != 'look' && pageType != 'start'" class="table-operator row">
          <l-table
            upload-type="normal"
            text="新增"
            v-if="pageType != 'start' && currentUer"
            btn-type="primary"
            :upload-arrys="form.fileList"
            business-code="SHE04"
            @fileArrysData="fileArrysData"
          />
        </div>
        <s-table
          ref="table"
          bordered
          size="default"
          row-key="key"
          :columns="columns"
          :data="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          :show-pagination="false"
        >
          <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
          <span slot="action" slot-scope="text, record, index">
                        <a
                          :href="
                                '/api/ycloud-file-center/oper/download?access_token=' +
                                token +
                                '&fileId=' +
                                record.fileId
                            "
                        >下载</a
                        >
                        <a-divider type="vertical" />
                        <a href="javascript:" @click="$filePreview(record)">查看</a>
                        <a-divider v-if="pageType != 'look' && pageType != 'start'" type="vertical" />
                        <a v-if="pageType != 'look' && pageType != 'start'" @click="delItem(index)">删除</a>
                    </span>
        </s-table>
      </a-form-model>
    </a-card>
    <seeSign :id="id" :visible="signInVsible" @cancel="signInVsible = false" @confirm="signInVsible = false" />

    <div v-if="pageType !== 'look'" class="tool-btns page-btn-right-top">
      <a-button
        v-if="pageType == 'start' && currentUer"
        type="primary"
        :loading="loading.START"
        @click="handleSave('START')"
      >
        开始会议
      </a-button>
      <a-button
        v-if="pageType != 'start' && currentUer"
        type="primary"
        :loading="loading.DRAFT"
        @click="handleSave('DRAFT')"
      >
        保存草稿
      </a-button>
      <a-button
        v-if="pageType != 'start' && currentUer"
        type="primary"
        :loading="loading.SUBMITTED"
        @click="handleSave('SUBMITTED')"
      >
        提交
      </a-button>
      <a-button type="primary" @click="handleClose"> 关闭</a-button>
    </div>
    <div v-else class="tool-btns page-btn-right-top">
      <BasePrintButton type="primary" :before-print-fn="getMeetingPrintReq" />
      <a-button type="primary" class="ml20" @click="handleClose"> 关闭</a-button>
    </div>
  </base-breadcrumb>
</template>
<script>
import { STable } from '@/components'
import UploadList from '@/components/UploadList'

import { getMeeting, meetingSummary, startMeeting, printMeetingDetail } from '@/api/office/conference'
import seeSign from '@/components/seeSign'
import { getMeetingPrint } from '@/api/safetySupervision/metting'
import BasePrintButton from '@/components/BasePrintButton' // 打印按钮
const columns = [
  {
    title: '序号',
    dataIndex: 'serial',
    width: '5%',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '文件名称',
    dataIndex: 'fileName',
    width: '40%'
  },
  {
    title: '文件格式',
    dataIndex: 'suffixName'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '15%',
    scopedSlots: { customRender: 'action' }
  }
]

import Vue from 'vue'

export default {
  components: {
    STable,
    seeSign,
    BasePrintButton,
    UploadList
  },
  data() {
    return {
      signInVsible: false,
      loading: {
        DELETE: false,
        DRAFT: false,
        SUBMITTED: false,
        START: false,
        isLoad: false
      },
      columns,
      status: [
        { id: 20, name: '待开始' },
        { id: 30, name: '进行中' },
        { id: 35, name: '审批中' },
        { id: 40, name: '已完结' }
      ],
      isClear: false,
      form: { fileList: [], meetingSummary: '', viewName: "" },
      visible: false,
      rules: {
        meetingSummary: [{ required: true, message: '请填写会议纪要', trigger: 'change' }]
      },
      id: '',
      pageType: '',
      token: Vue.getAcloudProvider().getAccessToken(),
      loadData: () => {
        return new Promise((resolve, reject) => {
          resolve({
            data: this.form.fileList
          })
        })
      },
      editor: true
    }
  },
  watch: {
    '$route': {
      handler(to, from) {
        if (this.id !== this.$route.query.id) {
          this.initPage()
        }
      }
    }
  },
  computed: {
    currentUer() {
      const userInfo = Vue.getAcloudProvider().getUserInfo()
      console.log(userInfo.name )
      console.log(this.form.creatorName)
      return userInfo.name == this.form.creatorName
    },
    disabled() {
      return this.pageType === 'look'
    }
  },
  mounted() {
    this.initPage()
  },
  methods: {
    initPage() {
      if (this.$route.query.id) {
        this.id = this.$route.query.id
        this.pageType = this.$route.query.pageType
        this.initTitle()
        this.getMeeting()
      }
    },
    initTitle() {
      if (this.pageType == 'edit') {
        this.$route.meta.title = '填写会议纪要'
      } else {
        this.$route.meta.title = '会议详情'
      }
    },
    commentsVal: function(val) {
      console.log(val)
      this.form.meetingSummary = val
    },
    validateForm() {
      let flag = false
      this.$refs.form.validate((valid) => {
        flag = valid
      })
      if (this.form.meetingTypeCategory == 7) {
        this.$refs.form7.validate((valid) => {
          flag = valid
        })
      }
      console.log(flag)
      return flag
    },
    // 处理增、删、改操作
    async handleSave(status) {
      if (this.pageType == 'start') {
        this.loading[status] = true
        const [err, res] = await startMeeting({ id: this.id })
        this.loading[status] = false
        this.editor = false
        this.$nextTick(() => {
          this.pageType = 'edit'
          this.editor = true
        })

        this.getMeeting()
        this.initTitle()
        return
      }
      if (!this.validateForm()) return
      if (this.loading[status]) return
      this.loading[status] = true
      const params = {
        ...this.form,
        // status: status === 'DRAFT' ? 30 : 35
        status: status === 'DRAFT' ? 10 : 20
      }
      // const { pageType } = this.$route.query
      // const fn = pageType === 'edit' ? meetingSummary : meetingSummary
      // const map = {
      //     DRAFT: meetingSummary,
      //     SUBMITTED: meetingSummary,
      // }
      const [err, res] = await meetingSummary(params)
      if (!err) {
        this.$message.success('成功')
        this.handleClose()
      }
      this.loading[status] = false
    },
    getMeetingPrintReq() {
      if (this.form.meetingTypeCategory == '7') {
        return printMeetingDetail({ id: this.id }).then((res) => {
          return res[1].data.content
        })
      } else {
        return getMeetingPrint({
          id: this.id,
          type: this.$route.query.printType === 'education' ? 'AQJYJJ' : 'AQGJ'
        }).then((res) => {
          return res[1].data.content
        })
      }
    },
    async getMeeting() {
      this.loading.isLoad = true
      const [err, res] = await getMeeting({ id: this.id })
      if (!err) {
        this.form = res.data
        this.form.viewName = this.form.branchComName + '/' + this.form.projectName
        this.$refs.table && this.$refs.table.refresh && this.$refs.table.refresh(true)
      }
      this.loading.isLoad = false
    },
    delItem(idx) {
      this.form.fileList.splice(idx, 1)
      this.$refs.table.refresh(true)
      console.log(this.form.fileList)
    },
    fileArrysData: function(val) {
      this.form.fileList = val
      this.$refs.table.refresh(true)
    },
    handleFileUploaded(list) {
      this.form.fileList = [...list]
    },
    onSearch() {
      this.visible = true
    },
    handleClose() {
      this.$multiTab.close(this.$route.fullpath)
    },
    onSelectChange(e) {
      console.log('selectedRowKeys changed: ', e)
    },
    handlePage() {
      let routeData = this.$router.resolve({
        path: '/conference/standardConference/conferenceList/conferenceScreen',
        query: {
          id: this.id
        }
      })
      window.open(routeData.href, '_blank')
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.tool-btns {
  display: flex;
  justify-content: flex-end;

  @{deep} .ant-btn + .ant-btn {
    margin-left: 12px;
  }
}

.flex {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 40px;
}
</style>
